<template>
  <Card>
    <div class="text-xl font-bold">{{ displayName }}</div>
    <div class="text-sm text-sl-textGray">{{ preName }}</div>

    <div class="absolute top-10 right-8">
      <span class="text-xs text-sl-textGray">
        <div>最大值:{{ maxValue }}</div>
        <div>最小值:{{ minValue }}</div>
      </span>
    </div>
    <div :id="name" class="md:h-4/5 !md:w-full enter-x" style="width: 650%; height: 300%"></div>
  </Card>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import { Card } from 'ant-design-vue';
import moment from 'moment';

const props = defineProps({
  displayName: String,
  maxValue: String,
  minValue: String,
  preName: String,
  metricName: String,
  unit: String,
  time: Array,
  value: Array,
});

let name = props.preName + '-' + props.metricName;
let time = [];
let option = {
  xAxis: {
    type: 'category',
    data: time,
    splitLine: {
      show: true,
    },
    axisLabel: {
      textStyle: {
        color: '#8692b0',
        fontSize: 10,
      },
    },
    axisLine: {
      lineStyle: {
        color: '#8692b0',
      },
    },
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
    },
    axisLabel: {
      textStyle: {
        color: '#8692b0',
        fontSize: 10,
      },
    },
    axisLine: {
      lineStyle: {
        color: '#8692b0',
      },
    },
  },
  series: [
    {
      data: props.value,
      type: 'line',
      symbol: 'none',
      smooth: false,
      itemStyle: {
        normal: {
          color: '#3795e8',
          lineStyle: {
            width: 1, //设置线条粗细
          },
        },
      },
    },
  ],
};

onMounted(() => {
  let chartDom = document.getElementById(props.preName + '-' + props.metricName);
  props.time.forEach((item) => {
    time.push(moment(Number(item)).format('YYYY-MM-DD HH:mm:ss').toString());
  });
  let myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
});
</script>
